<template>
  <div class="contact">
    <div class="contact-header">
      <h1>联系我们</h1>
      <p>有任何问题或建议，请随时联系我们</p>
    </div>
    
    <div class="contact-content">
      <div class="contact-form">
        <h2>发送消息</h2>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">姓名</label>
            <input 
              type="text" 
              id="name" 
              v-model="form.name" 
              required
              placeholder="请输入您的姓名"
            >
          </div>
          
          <div class="form-group">
            <label for="email">邮箱</label>
            <input 
              type="email" 
              id="email" 
              v-model="form.email" 
              required
              placeholder="请输入您的邮箱"
            >
          </div>
          
          <div class="form-group">
            <label for="subject">主题</label>
            <input 
              type="text" 
              id="subject" 
              v-model="form.subject" 
              required
              placeholder="请输入消息主题"
            >
          </div>
          
          <div class="form-group">
            <label for="message">消息内容</label>
            <textarea 
              id="message" 
              v-model="form.message" 
              required
              rows="5"
              placeholder="请输入您的消息内容"
            ></textarea>
          </div>
          
          <button type="submit" class="submit-btn">发送消息</button>
        </form>
      </div>
      
      <div class="contact-info">
        <h2>联系信息</h2>
        <div class="info-item">
          <h3>📧 邮箱</h3>
          <p>contact@vue2demo.com</p>
        </div>
        
        <div class="info-item">
          <h3>📱 电话</h3>
          <p>+86 138-0000-0000</p>
        </div>
        
        <div class="info-item">
          <h3>📍 地址</h3>
          <p>北京市朝阳区某某街道123号</p>
        </div>
        
        <div class="info-item">
          <h3>🕒 工作时间</h3>
          <p>周一至周五 9:00-18:00</p>
        </div>
      </div>
    </div>
    
    <div v-if="showMessage" class="success-message">
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  data() {
    return {
      form: {
        name: '',
        email: '',
        subject: '',
        message: ''
      },
      showMessage: false,
      message: ''
    }
  },
  methods: {
    submitForm() {
      // 模拟表单提交
      this.message = `感谢您的消息，${this.form.name}！我们会尽快回复您。`
      this.showMessage = true
      
      // 重置表单
      this.form = {
        name: '',
        email: '',
        subject: '',
        message: ''
      }
      
      // 3秒后隐藏消息
      setTimeout(() => {
        this.showMessage = false
      }, 3000)
    }
  }
}
</script>

<style scoped>
.contact {
  max-width: 1000px;
  margin: 0 auto;
}

.contact-header {
  text-align: center;
  margin-bottom: 3rem;
}

.contact-header h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-header p {
  color: #7f8c8d;
  font-size: 1.2rem;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.contact-form,
.contact-info {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.contact-form h2,
.contact-info h2 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
}

.submit-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.submit-btn:hover {
  background: #2980b9;
}

.info-item {
  margin-bottom: 2rem;
}

.info-item h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.info-item p {
  color: #555;
  margin-left: 1.5rem;
}

.success-message {
  background: #2ecc71;
  color: white;
  padding: 1rem;
  border-radius: 4px;
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
</style>
